<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../../three.js-r151/build/three.module.js",
		"three/addons/": "../../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        1. 位置变化：
           0~3秒，物体从(0,0,0)逐渐移动到(3,0,0),
           3~6秒, 逐渐从(3,0,0)移动到(0,0,3)
        2. 颜色变化：
           2~5秒，物体从红色逐渐变化为蓝色
    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 必须创建的三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        console.log("cube", cube);
        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render);

            // if (cube.position.x < 3) {
            //     cube.position.x += 3 / (3 * 60);
            // }
        }
        render();

        // 2. 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 动画控制
        // 1. 位置变化
        setTimeout(() => {
            let timer = setInterval(() => {
                if (cube.position.x > 3) {
                    clearInterval(timer);
                };
                cube.position.x += 3 / (3 * 60);
            }, 16.7)
        }, 0);
        
        setTimeout(() => {
            function change() {
                if (cube.position.x > 0) {
                    cube.position.x -= 3 / (3 * 60);
                    cube.position.z += 3 / (3 * 60);
                    requestAnimationFrame(change)
                } 
            }
            change();
        }, 3000);

        // 2. 颜色变化
        setTimeout(() => {
            function change() {
                if (cube.material.color.r > 0) {
                    cube.material.color.r -= 1 / (3 * 60);
                    cube.material.color.b += 3 / (3 * 60);
                    setTimeout(change, 16.7)
                }
            }
            cube.material.color.set('red')
            change();
        }, 2000);
        console.log(cube.material.color);

    </script>
</body>

</html>